<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性（10个属性）</title>
		<!-- 文本格式化属性（4种方式，10个属性）
		1.控制字体：font-family、font-size、font-weight
		2.控制文本布局【对齐、间隙】：text-algin、line-height、letter-spacing、word-spacing
		3.文本修饰效果：text-decoration、text-shadow
		4.处理文本效果：white-space(换行)
		 -->
		<style>
			/* css3语法：选择器{
				属性： 属性值;
				属性： 属性值;
			} 
			叫法：一个样式
			id选择器语法：html元素加id=“别名”
			css中加#别名选中
			提醒：加权 元素选择器名    1
			          id选择器       100
					  类与伪类选择器  10
			*/
		  div#d1{
			   color: #aa55ff;
			    /* 知识点1：文本格式化属性-->1.针对控制字体 */
				/*font-family-字体家族:微软雅黑,sans-serif
				问题：可以设置多个字体，浏览器按顺序找字体
				兼容考虑：用户电脑字体缺失，对应找可以使用字体！
				*/
			   font-family: 华文彩云,sans-serif;
			   /*知识点2：文本格式化属性-->2.针对控制字体
				font-size字体尺寸：px/em;
				px---pc端----像素，特点：绝对值
				em---移动端---特点：相对于父元素字体大小，倍数
				*/
			   font-size: 10px;
			   /* 知识点3：·文本格式化属性--->3.针对控制字体
				font-weight字体加粗
				用法：全局字体，通配选择器中使用
				400（normal正常粗细）
				700（bold加粗） 相对父元素加粗
				     light     相对父元素加细
				*/
				font-weight: 700;
		   }
		   div{
			   color: #005500;
		   }
		   /* h1{
			   color: #00aaff;
		   } */
		   .c1{
			   color: #0055ff;
		   } 
		  div .c1{
			  color: #55aa7f;
		  } 
		  div h1.c1{
			  /* 知识点4：文本格式化属性--针对控制文本格式 */
			  text-align: justify;/* (大致位置：中间，上下左右，对齐) */
			  /* 两端对齐：字体空间长度，使用位置：弹性布局 */
			  color: #ffaaff;
		  }
		  div span{
			  border: 1px solid;
			  height: 60px;
			  /* 行转块 */
			  display: block;
			  /* 知识点5：文本格式化属性--文本对齐方式【垂直】
			   line-height：行高属性
			   使用方式：一定跟高度一起出现【垂直】
			   */
	          line-height: 60px;
			  /* 知识点6：文本格式化属性--文本间隙【字符、单词】 */
			  letter-spacing: 2px;
			  /* 知识点7：文本格式化属性--文本间隙【单词】 */
			  word-spacing: 2px;
			  /* 补充：1.所有的单词大写
 			          2.所有单词的首字符大写
					  3.实现首行缩进200px
					*/
				   text-transform: uppercase;
				   text-transform: capitalize;
				   text-indent: 200px;
		  }
		  a{
			  /* 知识点8：文本修饰效果,针对超链接
			   使用方法：与同配器一起使用
			   none：去掉超链接的下划线
			   underline：默认下划线，切换
			   line-through：删除线，被html5中s元素取代
			   */
			  text-decoration: none;
			  /* 知识点9：文本修饰效果，针对超链接和文本
			   text-shadow 文本阴影属性
			   属性值：x值 y值 blur模糊距离 颜色；
			   */
			  text-shadow: 5px 5px 5px #aa55ff;
		  }
		  p{
			  border: 1px solid red;
			  /* 知识点10：white-space换行属性
			   属性值不同效果不同
			   nowrap 效果：不换行，作用：在一行显示，不可以超出范围
			          使用特点：溢出
			   pre    效果：
			   normal 默认，
			   */
			   white-space: nowrap; /* 不换行，就一行 */
			   overflow: hidden;     /* 其他行省略 */
			   white-space: pre;   /* 保持原始文本空格和回车 */ 
			   white-space: normal;   /* 默认，空格合并，自动换行 */
					 }
		</style>
	</head>
	<body>
		<h1>处理文本效果【换行和溢出】</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima hic corrupti delectus. Impedit expedita sint vitae asperiores quae veritatis voluptas id perspiciatis itaque ut, modi quisquam eaque reiciendis! Odio, laborum?w</p>
		
		
		
		<h1>
			<marquee>控制文本布局【对齐、间隙】</marquee>
		</h1>
		<!-- 需求：创建一个div，内嵌span元素，增加假文
		     设置样式：添加一个元素实线边框，高度：25px
			 派生选择器找到span元素
		 -->
		<div><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum dignissimos numquam magnam voluptatem alias, est distinctio maiores suscipit necessitatibus, obcaecati ex aut odit labore! Ut corporis qui quo ea quis!</span></div>
		<!-- 需求：创建a元素，超链接跳转到唐工官网 -->
		<div style="height: 200px;"></div>
		<h1>文本修饰效果</h1>
		<a href="http://www.tsgzy.edu.cn">跳转到唐工官网</a>
		<div id="d1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem beatae magnam, deleniti facere omnis nam atque. Veniam, distinctio rem! Cum suscipit minima odio, quasi provident dolorum explicabo earum debitis consectetur?</div>
	    <div><h1 class="c1 c2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit dolor cumque facere itaque sapiente voluptatum vitae doloribus excepturi, perferendis exercitationem ipsam facilis quibusdam temporibus fuga dignissimos molestias dolores quisquam adipisci?</h1></div>
		<!-- 需求：外围div 内层写h1，起两个别名，css3里用任意别名字体设置颜色
		          要求：使用加权方式
		-->
	</body>
</html>